<template>
  <section>
    <div class="flex-row">
      <div class="flex-item-fixed mr10">
        <div class="preview-layer">
          <div class="preview-bg"></div>
          <div class="preview-phone">
            <div class="preview-content">
              <!--<div class="top-video">-->

                <!--<video-player  class="video-player-box"-->
                               <!--ref="videoPlayer"-->
                               <!--:options="playerOptions"-->
                               <!--:playsinline="true"-->
                               <!--@ready="playerReadied" v-if="currentChildActivity.video">-->
                <!--</video-player>-->
                <!--<template v-else>-->
                  <!--<image-cover v-if="currentChildActivity.cover" :thumb.sync="currentChildActivity.cover" width="361px" height="241px" size-type="contain"></image-cover>-->
                <!--</template>-->
              <!--</div>-->
              <div class="article-title">
                <h1 class="title">{{currentChildActivity.title}}</h1>
              </div>
              <div class="article-summary">
                【摘要】{{currentChildActivity.summary}}
              </div>
              <div class="article-content">
                <html-content :contentHtml="currentChildActivity.content"></html-content>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="flex-item-fixed preview-right">
        <el-col class="pd5" v-if="!currentChildActivity.visible">
          <el-button type="primary"  plain @click="save(1)">展示</el-button>
        </el-col>
        <el-col class="pd5" v-if="currentChildActivity.visible">
          <el-button type="success"  plain @click="save(0)">隐藏</el-button>
        </el-col>
      </div>
    </div>
  </section>
</template>

<script>
import { mapGetters } from "vuex";
import ImageCover from "@/components/image-cover";
import HtmlContent from "@/components/html-content";
export default {
  name: "pre-childChildActivity",
  props: {
    isClose: Boolean
  },
  created() {},
  mounted() {},
  computed: {
    ...mapGetters({
      currentChildActivity: "currentChildActivity",
      playerOptions: "playerOptions"
    })
  },
  data() {
    return {};
  },
  methods: {
    playerReadied(player) {
      var obj = {};
      obj.poster = this.$options.filters.fullImagePath(
        this.currentChildActivity.cover
      );
      obj.src = this.$options.filters.fullImagePath(
        this.currentChildActivity.video
      );
      this.$store.dispatch("updateVideoOptions", obj).then(ret => {});
    },
    back() {
      this.$emit("close");
    },
    save(status) {
      if (status === 0) {
        this.currentChildActivity.visible = false;
      } else {
        this.currentChildActivity.visible = true;
      }

      this.$store
        .dispatch("addOrUpdateChildActivityS", this.currentChildActivity)
        .then(ret => {
          this.$notify({
            title: "提交成功",
            type: "success"
          });
          this.back();
        });
    }
  },
  components: {
    ImageCover,
    HtmlContent
  }
};
</script>

<style scoped>
@import "../../../../src/styles/preview-style.css";
</style>
